<template>
  <div>
    <HeaderTop>
      <template #left> <span @click="reload">ele.me</span> </template>
      <template #right>
        <van-icon v-if="false" name="manager" />
        <span v-else class="fs-6">登录|注册</span>
      </template>
    </HeaderTop>
    <div class="back-page">
      <van-cell-group border>
        <van-cell>
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <span class="fs-5 text-2">{{ data.cityText }}</span>
          </template>
          <template #value>
            <span class="fs-6">{{ data.tip }}</span>
          </template>
        </van-cell>
        <van-cell
          is-link
          icon="location-o"
          :to="{ name: 'City', params: { id: LocationCity?.id } }"
        >
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <span style="font-size: 0.42rem; color: #3190e8">{{ LocationCity?.name }}</span>
          </template>
        </van-cell>
      </van-cell-group>
      <div class="my-2 back-white">
        <div class="py-2 px-2 text-2 fs-6">热门城市</div>
        <van-config-provider :theme-vars="themeVars">
          <van-grid :column-num="4">
            <van-grid-item
              v-for="value in HotCities"
              :key="value.id"
              :text="value.name"
              :to="{ name: 'City', params: { id: value.id } }"
            />
          </van-grid>
        </van-config-provider>
      </div>
      <div v-for="(item, key) in allCityList" :key="key" class="my-2 back-white">
        <div class="py-2 px-2 text-2 fs-6">{{ key }}</div>
        <van-grid :column-num="4">
          <van-grid-item
            v-for="value in item"
            :key="value.id"
            :text="value.name"
            :to="{ name: 'City', params: { id: value.id } }"
          />
        </van-grid>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref,computed } from "vue";
import { getLocationCity, getHotCity, getAllCity } from "@/api";
import { cityInfo_format, cityAllInfo_format } from "@/type/index";
const data = {
  tip: "当前定位不准确,请手动选择",
  cityText: "当前定位城市:",
};
//修改vant样式
const themeVars = {
  gridItemTextColor: "#3190e8",
  gridItemContentPadding: "0.2rem",
  gridItemTextFontSize: "0.35rem",
};
//获取A-Z数组
const sortList: string[] = [];
for (let i = 65; i < 90; i++) {
  sortList.push(String.fromCharCode(i));
}
//当地地址
const LocationCity = ref<cityInfo_format>();
const HotCities = ref<cityInfo_format[]>();
const allCites = ref<cityAllInfo_format>();
//获取城市列表
const getCity = async () => {
  const res1 = await getLocationCity<cityInfo_format>();
  LocationCity.value = res1;
  const res2 = await getHotCity<cityInfo_format[]>();

  const res3 = await getAllCity<cityAllInfo_format>();
  HotCities.value = res2;
  allCites.value = res3;
};
//地址按A-Z排序
const allCityList = computed(() => {
  const sort: cityAllInfo_format = {};
  if (!!allCites.value == false) {
    return;
  }
  for (let i = 65; i <= 90; i++) {
    const a = String.fromCharCode(i);
    if (allCites.value[a]) {
      sort[a] = allCites.value[a];
    }
  }
  return sort;
});

//刷新
const reload = () => {
  getCity();
};
//初始化函数
const  initData = () => {
  getCity();
}
//调用初始化函数
initData()
</script>

<style lang="scss" scoped></style>
